<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
        width: 500px;
        height: 150px;
        border: 2px dashed green;
        margin-bottom: 18px;
      }
      span{

      }
    </style>
</head>
<body>
  <!--这里是不是有div页面样式没有任何变化，是从语义上区分了两个模块-->
  <!--div标签是一个容器标签，表达小区域小跨度，里面什么都能放，包括dev-->
  <div>
   <h3>中国主要城市</h3>
   <ul>
     <li>北京</li>
     <li>上海</li>
     <li>广州</li>
   </ul>
  </div>
  <div>
   <h3>美国主要城市</h3>
   <ul>
     <li>北京</li>
     <li>上海</li>
     <li>广州</li>
   </ul>
  </div>
  <!--span 也是一个容器标签，但是只是文本级别的，里面只能有文本，图片，表单元素，不可以防止p ul div等-->
  <!--span放置小元素，div放置大东西-->
  <p>
    有span
    <span>
      <a href=""> 111 </a>
      <a href=""> 222 </a>
    </span>
  </p>
  <p>
    无span
    <a href=""> 111 </a>
    <a href=""> 222 </a>
  </p>
</body>
</html>